<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>mypetstore</title>
</head>
<body>
<div th:replace="common/admintop"></div>

<div id="Content">

    <div id="BackLink">
        <a th:href="@{/admin/viewProducts(pageNum = 1)}">Back</a>
    </div>

    <p align="center"><font color="green" th:text="${changeMsg}"></font></p>

    <div id="Catalog">

        <h3>Product Information</h3>

        <br>

        <div>
            <form action="/admin/searchProduct" method="post">

                Id: &nbsp
                <input type="text" name="idKey">
                &nbsp
                Category: &nbsp
                <select name="categoryKey">
                    <option value="ALL" selected="selected">ALL
                    </option>
                    <option value="BIRDS">BIRDS
                    </option>
                    <option value="DOGS">DOGS
                    </option>
                    <option value="CATS">CATS
                    </option>
                    <option value="FISH">FISH
                    </option>
                    <option value="REPTILES">REPTILES
                    </option>
                </select>
                &nbsp
                <input type="submit" value="search" class="btn">

            </form>

        </div>

        <br>

        <table class="rwd-table">
            <tr  class="trHead">
                <th><b>Product ID</b></th>
                <th><b>Category</b></th>
                <th><b>Name</b></th>
                <th><b>Description</b></th>
                <th><b></b></th>
            </tr>
            <tr th:each="product:${productList}">
                <td>
                    <a th:href="@{/admin/viewItems(productId=${product.productId})}">
                        <span th:text="${product.getProductId()}">product id</span>
                    </a>
                </td>
                <td th:text="${product.categoryId}">
                    category
                </td>
                <td th:text="${product.getName()}">name</td>
                <td th:utext="${product.description}">
                    description
                </td>
                <td>
                    <a th:href="@{/admin/viewEditProduct(productId=${product.productId})}" class="btn">edit</a>
                    <a th:href="@{/admin/viewEditImage(productId=${product.productId})}" class="btn">image</a>
                    <a th:href="@{/admin/removeProduct(productId=${product.productId})}" class="btn">delete</a>
                </td>
            </tr>
            <td colspan="3"><a th:href="@{/admin/viewAddProduct}" class="btn">add</a></td>
        </table>

    </div>
</div>

<div th:replace="common/bottom"></div>
</body>
</html>